<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery 表格插件控制表格表格内容拖动标题固定在顶部</title>
<meta name="description" content="jquery 表格插件制作表格用户体验设计，固定表格标题始终在顶部，表格内容列表拖动，表格标题固定不移动。jquery 插件、jquery下载。" />

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
table{border:solid 1px #D5D5D5;border-collapse:collapse;width:100%;}
table td{border:1px solid #D5D5D5;font-size:12px;padding:7px 5px;}
table th{background-color:#EEE;border-right:1px solid #D5D5D5;font-size:13.5px;line-height:120%;font-weight:bold;padding:8px 5px;text-align:left;}
.ui-resizable{position:relative;}
.ui-resizable-handle{display:block;font-size:0.1px;position:absolute;z-index:99999;}
.ui-resizable-s{background:#EEEEEE url(images/grippie.png) no-repeat scroll center 2px;border-top:1px solid #CCCCCC;bottom:-5px;cursor:s-resize;height:14px;left:0;width:100%;}
.demo{width:900px;margin:0 auto;}
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.chromatable.js"></script>

<script type="text/javascript">

$(document).ready(function(){

	$("#yourTableID").chromatable({
		width: "100%",
		height: "400px",
		scrolling: "no"
	});
		
	$("#yourTableID2").chromatable({
		width: "900px",
		height: "400px",
		scrolling: "yes"
	});

});

</script>
</head>

<body>

<div class="demo">
	<table id="yourTableID" width="100%" border="0" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th>Check out this header</th>
				<th>Look here's another one</th>
				<th>Wow, look at me!</th>
			</tr>
		</thead>
		<tbody>	
			<tr>
				<td>Some content goes in here</td>
				<td>Praesent vitae ligula nec orci pretium vestibulum</td>
				<td>Maecenas tempus dictum libero</td>
			</tr>
			<tr>
			<td>Quisque in wisi quis orci tincidunt fermentum</td>
			<td>Mauris aliquet mattis metus</td>
			<td>Etiam eu ante non leo egestas nonummy</td>
			</tr>
		<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
		</tr>
		<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
		</tr>
		<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
		</tr>
		<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
		</tr>
		<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
		</tr>
		<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
		</tr>
		<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
		</tr>
		<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
		</tr>
		<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
		</tr>
		<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
		</tr>
		<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
		</tr>
		<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
		</tr>
		<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
		</tr>
		<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
		</tr>
		<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
		</tr>
		<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
		</tr>
		</tbody>	
	</table><br /><br />
	
	<table id="yourTableID2" width="100%" border="0" cellspacing="0" cellpadding="0">
	<thead>
	<tr>
	<th>Check out this header</th>
	<th>Look here's another one</th>
	<th>Wow, look at me!</th>
	</tr>
	</thead>
	<tbody>	
	<tr>
	<td>Some content goes in here</td>
	<td>Praesent vitae ligula nec orci pretium vestibulum</td>
	<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
	<td>Quisque in wisi quis orci tincidunt fermentum</td>
	<td>Mauris aliquet mattis metus</td>
	<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
	<td>Some content goes in here</td>
	<td>Praesent vitae ligula nec orci pretium vestibulum</td>
	<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
	<td>Quisque in wisi quis orci tincidunt fermentum</td>
	<td>Mauris aliquet mattis metus</td>
	<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
	<td>Some content goes in here</td>
	<td>Praesent vitae ligula nec orci pretium vestibulum</td>
	<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
	<td>Quisque in wisi quis orci tincidunt fermentum</td>
	<td>Mauris aliquet mattis metus</td>
	<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
	<td>Some content goes in here</td>
	<td>Praesent vitae ligula nec orci pretium vestibulum</td>
	<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
	<td>Quisque in wisi quis orci tincidunt fermentum</td>
	<td>Mauris aliquet mattis metus</td>
	<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
	<td>Some content goes in here</td>
	<td>Praesent vitae ligula nec orci pretium vestibulum</td>
	<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
	<td>Quisque in wisi quis orci tincidunt fermentum</td>
	<td>Mauris aliquet mattis metus</td>
	<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
	<td>Some content goes in here</td>
	<td>Praesent vitae ligula nec orci pretium vestibulum</td>
	<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
	<td>Quisque in wisi quis orci tincidunt fermentum</td>
	<td>Mauris aliquet mattis metus</td>
	<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
	<td>Some content goes in here</td>
	<td>Praesent vitae ligula nec orci pretium vestibulum</td>
	<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
	<td>Quisque in wisi quis orci tincidunt fermentum</td>
	<td>Mauris aliquet mattis metus</td>
	<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
	<td>Some content goes in here</td>
	<td>Praesent vitae ligula nec orci pretium vestibulum</td>
	<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
	<td>Quisque in wisi quis orci tincidunt fermentum</td>
	<td>Mauris aliquet mattis metus</td>
	<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
	<td>Some content goes in here</td>
	<td>Praesent vitae ligula nec orci pretium vestibulum</td>
	<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
	<td>Quisque in wisi quis orci tincidunt fermentum</td>
	<td>Mauris aliquet mattis metus</td>
	<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	</tbody>	
	</table>
</div>	
</body>
</html>
